<template>
    <div class="layout-parent w100 p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
                <div v-loading="loading">
                    <QualityPostApply type="audit" ref="postApplyRef" />
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="流程记录" en="Process Record"/></template>
                <ProcessHistory :processInsId="processInsId"/>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="流程图" en="Process Chart"/></template>
                <ProcessView :processInsId="processInsId"/>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <VpOperationRecordCard :id="formData.id" ref="rcListRef"></VpOperationRecordCard>
            </el-tab-pane>
        </el-tabs>
        <StatusBar
            :id="formData.id"
            :status="formData.zt"
            :isValid="formData.yxbs"
        />
        <PageBottom>
            <VpProcessToolBar 
                :process-ins-id="processInsId" 
                :task-id="taskId" 
                :loading="submitLoading" 
                :before-show-fn="beforeShowFn"
                :after-agree-fn="afterAgreeFn"
                :set-loading-fn="(_loading: boolean) => { submitLoading = _loading }"
            />
        </PageBottom>
    </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import ProcessHandle from "/@/components/vp/workflow/VpProcessHandle.vue";
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import request from '/@/utils/request';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import PageBottom from '/@/components/vp/PageBottom/index.vue';
import QualityPostApply from './QualityPostApply.vue';
import mittBus from '/@/utils/mitt';
import StatusBar from '/@/components/vp/status/StatusBar.vue';
import VpProcessToolBar from '/@/components/vp/workflow/VpProcessToolBar.vue';

export default defineComponent({
    name:'processQualityPostApply4Confirm',
    props: {
        businessId: String,
        taskId: String,
        processInsId: String,
    },
    components: { ProcessHistory, ProcessView, ProcessHandle, PageBottom, QualityPostApply, StatusBar, VpProcessToolBar,VpOperationRecordCard },
    setup(props) {
        const state = reactive({
            loading: false,
            submitLoading: false,
            formData: {
                id: "",
                zt: 10,
                yxbs: 1,
                sjbb: 1,
            }
		});

        const route = useRoute();
        const processHandleRef = ref();
        const postApplyRef = ref();

        onMounted(() => {
            loadForm();
        });

        const loadForm = () => {
            state.loading = true;
            nextTick(() => {
                request.get(`/quality/postApply/${props.businessId}`).then((res)=>{
                    postApplyRef.value.setData({
                        ...res.data
                    });
                    state.formData = { ...res.data };
                    state.loading = false;
                })
            })
        };

        //同意前操作
        const beforeShowFn = () => {
            state.submitLoading = true;
            return postApplyRef.value.getData(20).finally(()=>{state.submitLoading = false;});
        }

        //同意后操作
        const afterAgreeFn = (processHandle: any) => { 
            state.submitLoading = true;
            postApplyRef.value.getData(20).then((data: any) =>{
                request.post("/quality/postApply/audit", {
                    ...data,
                    processHandle: {
                        processInsId: props.processInsId,
                        taskId: props.taskId,
                        ...processHandle,
                    }
                }).then(()=>{
                    mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
                    ElMessage.success("办理完毕/Completed Processing");
                }).catch(()=>{
                }).finally(()=>{
                    state.submitLoading = false;
                })
            }).catch(()=>{state.submitLoading = false;});
        }

        return {
            ...toRefs(state),
            processHandleRef,
            postApplyRef,
            beforeShowFn,
            afterAgreeFn,
        }
    },
})
</script>